<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <style>
        .chart {
            width: 1200px;
            height: 400px;
            margin-left: 100px;
        }
    </style>
</head>


<body>
    <div id="chart" class="chart"></div>
    <form action="" lay-filter="formQuery" style="float: left;width: 70%;">
        <div class="layui-inline">
            <div class="layui-form-item">
                <b>日期开始：</b><input type="text" class="layui-input" id="dateStart"
                    style="border-style:solid;border-width:5px;width: 250PX;">
            </div>
        </div>

        <div class="layui-inline">
            <div class="layui-form-item">
                <b>日期结束：</b><input type="text" class="layui-input" id="dateEnd"
                    style="border-style:solid;border-width:5px;width: 250PX;">
            </div>
        </div>

        <div class="layui-inline" style="vertical-align: top;">
                <div class="layui-input-inline"><b>部门选择：</b>
                    <div name="orgIndexCode" id="classifyId" lay-filter="department-filter" class="xm-select-demo"
                        style="width: 300px;">
                        <option value="-1"></option>
                    </div>
                </div>
        </div>
        <div class="layui-inline" style="left: 20px;">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="query">查询</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
        <div style="clear: both;"></div>
    </form>

    <div id="setTime" style="float: right;position: relative;top: 20px;">
        <b>设置打卡时间</b>
        <b>迟到</b>
        <input type="text" class="layui-input  " id="time1" style="border-style:solid;border-width:5px;width: 100PX;display: inline-block;">
        <b>早退</b>
        <input type="text" class="layui-input  " id="time2" style="border-style:solid;border-width:5px;width: 100PX;display: inline-block;">
    </div>
    </div>
    <div style="clear: both;"></div>
    <table id="逻辑签到表" lay-filter="test"></table>
    <div id="page"></div>

    <script src="../../js/dashboard/jquery.min.js"></script>
    <script src="../../layui/layui.js"></script>
    <script src="../../js/select.js"></script>
    <script src="../../js/dashboard/echarts.min.js"></script>

    <script>
        Date.prototype.format = function (fmt) {
            var o = {
                "M+": this.getMonth() + 1, //月份
                "d+": this.getDate(), //日
                "h+": this.getHours(), //小时
                "m+": this.getMinutes(), //分
                "s+": this.getSeconds(), //秒
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度
                "S": this.getMilliseconds() //毫秒
            };
            if (/(y+)/.test(fmt)) {
                fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            }
            for (var k in o) {
                if (new RegExp("(" + k + ")").test(fmt)) {
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ?
                        (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                }
            }
            return fmt;
        }
        startDate = (new Date()).format("yyyy-MM-dd");
        _endDate = (new Date()).format("yyyy-MM-dd");
        classifyArr = [];
        startTime = "";
        _endTime = "";
        //personArr = [];
    </script>

    <script>

        layui.use('laydate', function () {
            var laydate = layui.laydate;
            //执行一个laydate实例

            function renderTime () {
                $.ajax({
                    url: "/guard/getDelayTime",
                    type: "get",
                    async: true, //是否异步请求
                    success: function (res) {
                        laydate.render({
                            elem: '#time1', //指定元素
                            value: res,
                            format: 'HH:mm',
                            type: 'time',
                            isInitValue: true,
                            done: function (value, date, endDate) {
                                setDelayTime(value)
                            }
                        });
                    }
                })
                $.ajax({
                    url: "/guard/getEarlyExitTime",
                    type: "get",
                    async: true, //是否异步请求
                    success: function (res) {
                        laydate.render({
                            elem: '#time2', //指定元素
                            value: res,
                            format: 'HH:mm',
                            type: 'time',
                            isInitValue: true,
                            done: function (value, date, endDate) {
                                setEarlyExitTime(value)
                            }
                        });
                    }
                })
            }
            renderTime()

            function setDelayTime(value){
                $.ajax({
                    url: "/guard/updateDelayTiem",
                    type: "get",
                    data: {
                        delayTime: value
                    },
                    dataType: 'json',
                    async: true, //是否异步请求
                })
            }

            function setEarlyExitTime(value){
                $.ajax({
                    url: "/guard/updateEarlyExitTime",
                    type: "get",
                    data: {
                        earlyExitTime: value
                    },
                    dataType: 'json',
                    async: true, //是否异步请求
                })
            }
        });
    </script>


    <script type="text/html" id="orgNameTpl">
        {{#  if(d.state === '迟到'){ }}
        <span style="color: red;">{{ d.orgName }}</span>
        {{#  } else { }}
        {{ d.orgName }}
        {{#  } }}
    </script>
    <script type="text/html" id="eventIdTpl">
        {{#  if(d.state === '迟到'){ }}
        <span style="color:red;">{{ d.eventId }}</span>
        {{#  } else { }}
        {{ d.eventId }}
        {{#  } }}
    </script>
    <script type="text/html" id="personNameTpl">
        {{#  if(d.state === '迟到'){ }}
        <span style="color:red;">{{ d.personName }}</span>
        {{#  } else { }}
        {{ d.personName }}
        {{#  } }}
    </script>
    <script type="text/html" id="eventTimeTpl">
        {{#  if(d.state === '迟到'){ }}
        <span style="color:red;">{{ d.eventTime }}</span>
        {{#  } else { }}
        {{ d.eventTime }}
        {{#  } }}
    </script>
    <script type="text/html" id="stateTpl">
        {{#  if(d.state === '迟到'){ }}
        <span style="color:red;">{{ d.state }}</span>
        {{#  } else { }}
        {{ d.state }}
        {{#  } }}
    </script>

    <script>
        function personTable(data, total) {
            layui.use('table', function () {
                table = layui.table;
                table.render({
                    elem: '#逻辑签到表',
                    height: 312,
                    data: data,
                    autoSort: false, //禁用前端自动排序。
                    id: "idTest",
                    page: false,
                    limit: 10,
                    cellMinWidth: 80,
                    type: "checkbox",
                    toolbar: true,
                    title: "门禁表",
                    defaultToolbar: ['filter', 'print', 'exports'],
                    cols: [
                        [ //表头
                            { field: 'eventId', title: '记录ID', sort: false, fixed: 'left', templet: '#eventIdTpl' },
                            { field: 'personName', title: '人员名称', sort: false, templet: '#personNameTpl' },
                            { field: 'orgName', title: '所属部门', sort: false, templet: '#orgNameTpl' },
                            { field: 'state', title: '当日状态', sort: false, templet: '#stateTpl' },
                            { field: 'eventTime', title: '该记录打卡时间', sort: false, templet: '#eventTimeTpl' },

                        ]
                    ]
                });

            });

        }
    </script>
    <script>

        function page(count,limit,curr) {

            layui.use('laypage', function () {
                var laypage = layui.laypage;
                laypage.render({
                    elem: 'page', //注意，这里的 page 是 ID，不用加 # 号
                    count: count, //数据总数，从服务端得到
                    limit: limit, // 每页条数
                    curr:curr,
                    limits: [10,20,30,50],
                    layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
                    jump: function (obj, first) {
                        //首次不执行
                        if (!first) {
                            //do something
                            ajaxData(obj.curr, obj.limit) // 分页点击传参
                        }
                    }
                });
            });
        }
    </script>
    <script>
        let chart = echarts.init(document.getElementById('chart'));
        let option = {
            title: {
                text: '签到人数变化'
            },
            tooltip: {
                trigger: 'axis',
            },
            legend: {
                data: ['空间1','空间2','空间3','空间4','空间5'],
                type: 'scroll',
                orient: 'vertical',
                right: 0,
                top: 20
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: 250,
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'time',
                    boundaryGap: false,
                    minInterval: 3600 * 24 * 1000
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '打卡人数'
                }
            ],
            series: [
                {
                    name: '空间1',
                    type: 'line',
                    stack:'总量',
                    data: [
                        ['2012-03-01 08:00',50],
                        ['2012-03-01 08:30',66],
                        ['2012-03-01 09:00',89],
                        ['2012-03-01 09:30',37],
                        ['2012-03-01 10:00',54],
                    ]
                },
                {
                    name: '空间2',
                    type: 'line',
                    stack:'总量',
                    data:[
                        ['2012-03-01 08:00',112],
                        ['2012-03-01 08:30',130],
                        ['2012-03-01 09:00',88],
                        ['2012-03-01 09:30',97],
                        ['2012-03-01 10:00',150],
                    ]
                },
                {
                    name: '空间3',
                    type: 'line',
                    stack:'总量',
                    data: [
                        ['2012-03-01 08:00',200],
                        ['2012-03-01 08:30',100],
                        ['2012-03-01 09:00',150],
                        ['2012-03-01 09:30',250],
                        ['2012-03-01 10:00',200],
                    ]
                },
                {
                    name: '空间4',
                    type: 'line',
                    stack:'总量',
                    data: [
                        ['2012-03-01 08:00',210],
                        ['2012-03-01 08:30',130],
                        ['2012-03-01 09:00',59],
                        ['2012-03-01 09:30',80],
                        ['2012-03-01 10:00',170],
                    ]
                },
                {
                    name: '空间5',
                    type: 'line',
                    stack:'总量',
                    data: [
                        ['2012-03-01 08:00',77],
                        ['2012-03-01 08:30',180],
                        ['2012-03-01 09:00',220],
                        ['2012-03-01 09:30',120],
                        ['2012-03-01 10:00',150],
                    ]
                }
            ]
        };
        function renderChart(){
            $.ajax({
                url: '/guard/getCharInfo',
                type: 'get',
                data: {
                    startTime: startDate,
                    endTime: _endDate
                },
                success: function (res) {
                    let data = JSON.parse(res)
                    option.legend.data = data.orgList
                    option.series = data.chartData
                    chart.setOption(option);
                }
            })
        }

        classifyId = xmSelect.render({
            el: '#classifyId',
            toolbar: {
                show: true,
                list: ['ALL', 'CLEAR', 'REVERSE']
            },
            filterable: true,
            paging: true,
            pageSize: 10
        });
        function getClassify() {
            $.ajax({
                url: "/guard/getAllOrgName",
                type: "get",
                dataType: 'json',
                async: true, //是否异步请求
                success: function (res) {
                    classifyData = [];
                    for (var i = 0; i < res.length; i++) {
                        classifyData[i] = {};
                        classifyData[i].name = res[i];
                        classifyData[i].value = i;
                    }
                    classifyId.update({
                        data: classifyData,
                        autoRow: true
                    })
                }
            });
        }
        getClassify();

        function ajaxData(pageNum, limit) {
            postData = {};
            postData.startTime = startDate;
            postData.endTime = _endDate;
            postData.limit = limit;
            postData.pageNum = pageNum;
            postData.orgNames = classifyId.getValue('name')
            log = JSON.stringify(postData);
            $.ajax({
                url: "/guard/getGuardInfoByTime",
                type: "post",
                contentType: "application/json; charset=utf-8",
                dataType: 'json',
                data: log,
                async: true, //是否异步请求
                success: function (res) {
                    let data = res.list.map(x=>{
                        if(x.isDelay == 0){
                            x.state = '正常'
                        }else{
                            x.state = '迟到'
                        }
                        x.eventTime= new Date(Number(x.eventTime)).format("yyyy-MM-dd h:m:s");
                        return x
                    })
                    page(res.total,limit,pageNum);
                    personTable(data);
                    renderChart()
                }
            })
        }
        ajaxData(1,10);
        layui.use('form', function () {
            var form = layui.form;
            //监听提交
            form.on('submit(query)', function (data) {
                ajaxData(1,10);
                return false;
            });
        });
    </script>

    <script>
        layui.use('laydate', function () {
            var laydate = layui.laydate;

            //执行一个laydate实例
            laydate.render({
                elem: '#dateStart', //指定元素
                value: new Date(),
                calendar: true,
                done: function (value, date, endDate) {
                    startDate = value;
                }
            });
        });
        layui.use('laydate', function () {
            var laydate = layui.laydate;

            //执行一个laydate实例
            laydate.render({
                elem: '#dateEnd', //指定元素
                value: new Date(),
                calendar: true,
                done: function (value, date, endDate) {
                    _endDate = value;
                }
            });
        });
    </script>
</body>
</html>
